<template>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
  <div>
    <div>姓名：{{ userInfo.name }} 年龄：{{ userInfo.age }}</div>
    <div>token：{{ token }}</div>
    <div>getter值：{{ newName }}</div>
    <button @click="handleUser">更新用户</button>
    <button @click="handleAge">更新 年龄</button>
    <button @click="handleToken">更新token</button>
  </div>
  <div>
    <h1>vueUse鼠标坐标</h1>
    <h3>mouse {{ x }}, {{ y }}</h3>
  </div>

  <div>
    {{ globalPropertyInfo }}
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/user'
import { useMouse } from '@vueuse/core'

const count: any = ref(0)

const userStore = useUserStore()

const { userInfo, token, newName } = storeToRefs(userStore)

const { updateUserInfo, updateAge, updateToken } = userStore

const handleUser = () => {
  updateUserInfo({ name: 'lisi', age: 24 })
}

const handleAge = () => {
  updateAge(userInfo.value.age + 1)
}

const handleToken = () => {
  updateToken('2324')
}
const { x, y } = useMouse()

const globalPropertyInfo = ref()

onMounted(() => {
  // 获取全局定义的变量（vue3不建议这么做，可以使用pinia、provide / inject）
  const { appContext } = getCurrentInstance()!
  globalPropertyInfo.value = appContext.config.globalProperties.$globalProperty.msg
})
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
